<template>
  <div class="rk-report">
    <div class="toolbar">
      <el-radio-group v-model="quickRange" size="small" @change="onQuickRange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="today">今日</el-radio-button>
        <el-radio-button label="yesterday">昨日</el-radio-button>
        <el-radio-button label="week">本周</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="custom">自定义</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-model="dateRange"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        :disabled="quickRange !== 'custom'"
        style="margin-left:12px;width: 420px"
      />
      <el-input v-model="query.supplierName" placeholder="供应商名称" style="width:160px;margin-left:12px" clearable />
      <el-input v-model="query.warehouseName" placeholder="仓库名称" style="width:160px;margin-left:12px" clearable />
      <el-input v-model="query.goodsOrCategory" placeholder="物品/类别" style="width:160px;margin-left:12px" clearable />
      <el-input v-model="query.operatorName" placeholder="经办人" style="width:140px;margin-left:12px" clearable />
      <el-button type="primary" style="margin-left:12px" @click="loadData(1)">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <el-button @click="onExport">导出</el-button>
      <el-button @click="loadData()">刷新</el-button>
    </div>

    <div class="cards">
      <el-card class="card" shadow="never">
        <div class="num">{{ stats.billCount }}</div>
        <div class="desc">入库单数量</div>
      </el-card>
      <el-card class="card" shadow="never">
        <div class="num">{{ stats.inQuantity }}</div>
        <div class="desc">入库货品数量</div>
      </el-card>
      <el-card class="card" shadow="never">
        <div class="num">{{ formatMoney(stats.inAmount) }}</div>
        <div class="desc">入库货品金额</div>
      </el-card>
    </div>

    <el-table :data="tableData" border style="width: 100%" height="520">
      <el-table-column type="index" label="#" width="60" />
      <el-table-column prop="billNo" label="入库单号" width="140" />
      <el-table-column prop="bizTime" label="入库时间" width="170">
        <template #default="{ row }">{{ formatTime(row.bizTime) }}</template>
      </el-table-column>
      <el-table-column prop="inType" label="入库类型" width="120" />
      <el-table-column prop="supplierName" label="供应商" width="160" />
      <el-table-column prop="goodsName" label="货品名称" min-width="200" />
      <el-table-column prop="warehouseName" label="仓库名称" width="140" />
      <el-table-column prop="unitPrice" label="入库单价" width="100">
        <template #default="{ row }">{{ formatMoney(row.unitPrice) }}</template>
      </el-table-column>
      <el-table-column prop="quantity" label="入库数量" width="100" />
      <el-table-column prop="amount" label="入库金额" width="120">
        <template #default="{ row }">{{ formatMoney(row.amount) }}</template>
      </el-table-column>
      <el-table-column prop="operatorName" label="经办人" width="100" />
      <el-table-column prop="makerName" label="制单人" width="100" />
      <el-table-column prop="deptName" label="所在部门" width="100" />
      <el-table-column prop="makeTime" label="制单时间" width="170">
        <template #default="{ row }">{{ row.makeTime ? formatTime(row.makeTime) : '—' }}</template>
      </el-table-column>
      <el-table-column prop="auditorName" label="审核人" width="100" />
      <el-table-column prop="auditTime" label="审核时间" width="170">
        <template #default="{ row }">{{ row.auditTime ? formatTime(row.auditTime) : '—' }}</template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="160" />
    </el-table>

    <div class="pager">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        v-model:current-page="page"
        v-model:page-size="pageSize"
        @size-change="loadData(1)"
        @current-change="loadData"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, reactive, watch } from 'vue'
import { fetchInFlowPage, fetchInFlowStats, type GetInFlowInput } from '/@/api/report/rk'

const tableData = ref<any[]>([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

const quickRange = ref<'all'|'today'|'yesterday'|'week'|'month'|'custom'>('month')
const dateRange = ref<[string, string] | null>(null)

const query = reactive<{ supplierName?: string; goodsOrCategory?: string; warehouseName?: string; operatorName?: string }>({})

function computeRange() {
  const now = dayjs()
  switch (quickRange.value) {
    case 'all':
      return null
    case 'today':
      return [now.startOf('day').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')]
    case 'yesterday': {
      const y = now.subtract(1, 'day')
      return [y.startOf('day').format('YYYY-MM-DD HH:mm:ss'), y.endOf('day').format('YYYY-MM-DD HH:mm:ss')]
    }
    case 'week':
      return [now.startOf('week').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')]
    case 'month':
      return [now.startOf('month').format('YYYY-MM-DD HH:mm:ss'), now.endOf('day').format('YYYY-MM-DD HH:mm:ss')]
    default:
      return dateRange.value ?? null
  }
}

function buildPayload(p = page.value): GetInFlowInput {
  const range = computeRange()
  return {
    startTime: range?.[0],
    endTime: range?.[1],
    supplierName: query.supplierName,
    goodsOrCategory: query.goodsOrCategory,
    warehouseName: query.warehouseName,
    operatorName: query.operatorName,
    page: p,
    pageSize: pageSize.value,
  }
}

async function loadData(p?: number) {
  if (p) page.value = p
  const payload = buildPayload()
  const [pageRes, statsRes] = await Promise.all([
    fetchInFlowPage(payload),
    fetchInFlowStats(payload),
  ])
  const pageData = pageRes?.data?.result ?? pageRes?.data ?? {}
  tableData.value = pageData.items ?? pageData.Items ?? []
  total.value = pageData.total ?? pageData.Total ?? 0
  const statsData = statsRes?.data?.result ?? statsRes?.data ?? statsRes
  stats.value = statsData
}

function reset() {
  quickRange.value = 'month'
  dateRange.value = null
  Object.keys(query).forEach(k => (query as any)[k] = undefined)
  loadData(1)
}

function onQuickRange() {
  if (quickRange.value !== 'custom') {
    dateRange.value = null
  }
  loadData(1)
}

function onExport() {
  // 预留：可调用后端导出接口
}

const stats = ref<{ billCount: number; inQuantity: number; inAmount: number }>({ billCount: 0, inQuantity: 0, inAmount: 0 })

function formatMoney(n: number) {
  return new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY', maximumFractionDigits: 2 }).format(n || 0)
}

function formatTime(t: string | Date) {
  if (!t) return ''
  const d = typeof t === 'string' ? new Date(t) : t
  return dayjs(d).format('YYYY-MM-DD HH:mm:ss')
}

watch(pageSize, () => loadData(1))

loadData(1)
</script>

<style scoped>
.rk-report { padding: 12px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cards { display: flex; gap: 12px; margin: 12px 0; }
.card { width: 240px; text-align: center; }
.num { font-size: 24px; font-weight: 600; }
.desc { color: #999; margin-top: 6px; }
.pager { margin-top: 10px; display: flex; justify-content: flex-end; }
</style>


